import { useStore } from 'vuex';
import { computed } from 'vue';
import { PLAY_MODE } from '@/assets/js/constant';

export default function useMode() {
  const store = useStore();
  // 获取当前播放模式
  const playMode = computed(() => {
    return store.state.playMode;
  });
  // 设置播放模式图标
  const modeIcon = computed(() => {
    const playModeVal = playMode.value;
    return playModeVal === PLAY_MODE.sequence ? 'icon-sequence' : playModeVal === PLAY_MODE.random ? 'icon-random' : 'icon-loop';
  });

  const modeText = computed(() => {
    const playModeVal = playMode.value;
    return playModeVal === PLAY_MODE.sequence ? '顺序播放' : playModeVal === PLAY_MODE.random ? '随机播放' : '单曲循环';
  });

  // 播放模式按钮点击
  function changeMode() {
    // 在0,1,2之间循环
    const mode = (playMode.value + 1) % 3;
    store.dispatch('changeMode', mode);
  }

  return {
    modeIcon,
    changeMode,
    modeText
  };
}
